<template>
  <div>
    <el-form v-show="showSearch" :inline="true" :model="searchForm" class="demo-form-inline" size="small"
      label-suffix="：">
      <el-form-item label="字典名称">
        <el-input v-model="searchForm.dictName" clearable></el-input>
      </el-form-item>
      <el-form-item label="字典编码">
        <el-input v-model="searchForm.dictCode" clearable></el-input>
      </el-form-item>
    </el-form>
    <!-- 操作 -->
    <div class="dis-o-between operate-line">
      <div>
        <el-button icon="el-icon-plus" plain type="primary" @click="add" size="small">新增</el-button>
        <el-button icon="el-icon-search" type="primary" @click="reqTableData(1)" size="small">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetReq()" size="small">重置</el-button>
      </div>
      <RightToolbar :showSearch.sync="showSearch" @queryTable="reqTableData(1)"></RightToolbar>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="字典名称" align="center" width="240" prop="dictName"></el-table-column>
      <el-table-column label="字典编号" align="center" width="240" prop="dictCode"></el-table-column>
      <el-table-column label="描述" align="center" prop="description"></el-table-column>
      <el-table-column label="操作" align="center" width="220px">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button size="small" type="text" @click="ziDianPeiZhi(scope.row)">字典配置</el-button>
          <el-button size="small" type="text" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <paginationCom :pagination="pagination" @handleSizeChange="handleSizeChange"
      @handleCurrentChange=handleCurrentChange>
    </paginationCom>


    <el-drawer title="字典列表" :visible.sync="drawer" direction="rtl" size="40%">
      <ZiDianLieBiao :lieBiaoData="lieBiaoData"></ZiDianLieBiao>
    </el-drawer>

    <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="40%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="ruleForm.dictName"></el-input>
        </el-form-item>
        <el-form-item label="字典编码" prop="dictCode">
          <el-input :readonly="title == '编辑字典' ? true : false" v-model="ruleForm.dictCode"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" rows="3" v-model="ruleForm.description"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <!-- <el-button @click="addContinue('ruleForm')" v-show="this.title == '新增字典' ? true : false">确定并继续</el-button> -->
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ZiDianLieBiao from "./ziDianLieBiao.vue";
export default {
  name: 'dictionaries',
  data() {
    return {
      showSearch: true,
      drawer: false,
      loading: false,
      searchForm: {},
      tableData: [],
      pagination: {
        total: 100,
        per_page: 10,
        from: 1,
        to: 0,
        current_page: 1, //当前页数
      },
      lieBiaoData: [],
      title: '',
      ruleForm: {

      },
      rules: {
        dictName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ],
        dictCode: [
          { required: true, message: '请输入字典编码', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ],
      },
      dialogVisible: false,
    };
  },
  props: {},

  components: { ZiDianLieBiao },

  created() { },

  mounted() { this.reqTableData(1) },

  beforeDestroy() { },

  methods: {
    resetReq() {
      this.searchForm = {};
      this.reqTableData(1);
    },
    reqTableData(page) {
      console.log(123);
      if (page) {
        this.pagination.current_page = page
      }
      this.loading = true;
      let data = {
        pageNum: this.pagination.current_page,
        pageSize: this.pagination.per_page,
        ...this.searchForm
      }
      this.sendGet('/dict/getDictPage', data).then(res => {
        if (res.errcode == 0) {
          this.tableData = res.data.list
          this.pagination.total = res.data.total
        }
        this.loading = false;
      })
    },
    // 分页器----新每页条数
    handleSizeChange(val) {
      this.pagination.per_page = val;
      this.reqTableData(1);
    },
    // 分页器-----新当前页
    handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.reqTableData();
    },
    add() {
      this.title = '新增字典'
      this.ruleForm = {}
      this.dialogVisible = true;
    },
    edit(row) {
      this.title = '编辑字典'
      this.ruleForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true;
    },
    ziDianPeiZhi(row) {
      this.drawer = true;
      this.lieBiaoData = row
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            ...this.ruleForm,
          }
          this.sendPost('/dict/saveOrUpdate', data).then(res => {
            if (res.errcode === 0) {
              this.suc({ message: res.errmsg });
              this.ruleForm = {};
              this.reqTableData(1)
            } else {
              this.err({ message: res.errmsg });
            }
          });
          this.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 确定并继续·
    addContinue(data) {
      this.submitForm(data);
      this.ruleForm = {};
      this.dialogVisible = true;
    },
    del(row) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/dict/deleteById', { id: row.id }).then(res => {
          if (res.errcode === 0) {
            this.suc({ message: res.errmsg });
          }
          this.reqTableData()
        })
      })
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss"></style>
